<template>
    <div>
<el-container style="height: 100vh; border: 1px solid  #545C64">
    <el-aside width="aside_witdh" style="background-color: rgb(238, 241, 246);  height: 100%;">
       <Aside :isCollapse="isCollapse"></Aside>
    </el-aside>

    <el-container style="height: 100%; border: 1px solid  #545C64">
        <el-header style="text-align: right; font-size: 12px;border-bottom: #545C64 1px solid;background-color: #545C64">
            <Header @doCollapse="doCollapse" :icon="icon"></Header>
        </el-header>

        <el-main>
<!--            <Main></Main>-->
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>
    </div>
</template>
<style>
    .el-header {
        #background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
    .el-main {
        padding: 5px;
    }
    .el-aside {
        color: #333;
    }
</style>

<script>
    import Aside from "@/views/Aside";
    import Header from "@/views/Header";
    import Main from "@/views/Main";
    export default {
        components: {Main, Header, Aside},
        data(){
            return{
                isCollapse: false,
                aside_witdh:'200px',
                icon:'el-icon-s-fold'
            }
        },
        methods:{
            doCollapse(){
                this.isCollapse=!this.isCollapse
                if(!this.isCollapse){
                    this.aside_witdh='200px'
                    this.icon='el-icon-s-fold'
                }else{
                    this.aside_witdh='64px'
                    this.icon='el-icon-s-unfold'
                }
            }
        }
    };
</script>
